<template>
  <div class="list-sale">
    <el-row>
      <el-col :span="8" :offset="3" :xs="{span:20,offset:2}">
        <div class="title">
          出售单列表
        </div>
      </el-col>
      <el-col :span="6" :offset="4" :xs="{span:9,offset:13}">
        <el-radio-group v-model="stat" size="large" style="margin-top: 12px">
          <el-radio-button label="ready" />
          <el-radio-button label="closed" />
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3">
        <el-card :body-style="{ padding: '5px' }" class="table-card">
          <el-table size="small" :data="list" stripe style="width: 100%">
            <el-table-column prop="SaleId" label="出售单编号" />
            <el-table-column label="创建时间" width="120">
              <template #default="scope">
                {{sToT(scope.row.Created)}}
              </template>
            </el-table-column>
            <el-table-column label="更新时间" width="120">
              <template #default="scope">
                {{sToT(scope.row.Updated)}}
              </template>
            </el-table-column>
            <el-table-column label="过期时间" width="120">
              <template #default="scope">
                {{sToT(scope.row.Exp)}}
              </template>
            </el-table-column>
            <el-table-column prop="GoodId" label="商品编号" />
            <el-table-column prop="Num" label="出售总数" />
            <el-table-column prop="LeftNum" label="剩余数量" />
            <el-table-column prop="MinPrice" label="接受最低价" />
            <el-table-column prop="State" label="当前状态"/>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" v-if="scope.row.State == 'ready'" @click="closeSale(scope.row.SaleId)">关闭</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3" >
        <div class="pagination-block">
          <el-pagination v-model:currentPage="page" layout="prev, pager, next" :page-count="lastPage"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { saleList, saleDelete } from '../http/api/deal'

export default {
  data() {
    return {
      list: [],
      stat: 'ready',
      part: 1,
      page: 1,
      pmax: 10,
      lastPage: 100
    }
  },
  created: function() {
    saleList(
      this.stat,
      this.part,
      this.page,
      this.pmax,
    )
    .then(res => {
      console.log(res)
      if (res.data.code == 1200) {
        this.list = res.data.data.item
        this.lastPage = res.data.data.lastPage
      }
    })
  },
  methods: {
    sToT: function(timeStamp) {
      let d = new Date(timeStamp)
      return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()
    },
    closeSale: function(saleId) {
      saleDelete(saleId)
      .then(res => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '关闭成功'
          })
          this.cardFlag = 1
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: '关闭失败'
          })
        }
      })
    }
  },
  watch: {
    stat() {
      this.page = 1
      saleList(
        this.stat,
        this.part,
        this.page,
        this.pmax,
      )
      .then(res => {
        console.log(res)
        if (res.data.code == 1200) {
          this.list = res.data.data.item
          this.lastPage = res.data.data.lastPage
        }
      })
    },
    page() {
      saleList(
        this.stat,
        this.part,
        this.page,
        this.pmax,
      )
      .then(res => {
        console.log(res)
        if (res.data.code == 1200) {
          this.list = res.data.data.item
          this.lastPage = res.data.data.lastPage
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .list-sale {
    height: 100%;
    width: 100%;
    .title {
      margin: 10px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      font-size: 30px;
      font-weight: 700;
      color: var(--el-text-color-primary);
      line-height: 40px;
      text-align: center;
    }
    .table-card {
      margin: 10px;
      border-radius: 3px;
    }
    .pagination-block {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
</style>